<template>
  <div class="main">
      <div class="quickModel">
        <div class="title">快捷数量</div>
        <div class="quicks">
          <div class="num" v-for="(item,index) in quickNum" :key="index" @click="transCount=item">
            +{{item}}
          </div>
        </div>
      </div>

      <div class="inputModel">
        <div class="title">购买数量</div>
        <div class="input">
          <input v-model="transCount" type="number" min="100" max="1000000" placeholder="100-1000000" />
          <span>B</span>
        </div>
      </div>

      <div class="line">
        <div class="left">付款方式</div>
        <div class="right" @click="showReceivePaymentPicker=true">{{receivePaymentName || '请选择付款方式'}} {{receivePaymentName?`(${receivePaymentCard})`:''}}</div>
      </div>

      <div class="line">
        <div class="left">最高单价</div>
        <div class="right" @click="showPricePicker=true">{{transPrice}}</div>
      </div>

      <div class="redTip">注：实际匹配的结果数量可能会低于输入的数量</div>

      <div class="button" @click="handle">快速匹配</div>

      <div class="bottom">
        <span>如何使用一键买币？</span>
        <img class="right" src="../../assets/images/arr7.png" />
      </div>


      <van-popup v-model="showPricePicker" round position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex='2'
          :columns="priceList"
          @cancel="showPricePicker = false"
          @confirm="onConfirmPrice"
        />
      </van-popup>

      <van-popup class="recPop" closeable v-model="showReceivePaymentPicker" round position="bottom">
        <div class="title">付款方式</div>
        <van-radio-group v-model="receivePaymentIndex">
          <van-cell-group v-for="(item,index) in payeeList" :key="index">
            <van-cell :title="`${item.payeeName}(${item.payeeCard.substr(-4)})`" clickable @click="setRec(index)">
              <template #right-icon>
                <van-radio :name="index" />
              </template>
              <template #icon>
                <img class="leftIcon" :src="require(`@/assets/images/receivePayment/${item.payeeType}.png`)" />
              </template>
            </van-cell>
          </van-cell-group>

          <van-cell-group>
            <van-cell title="添加新的付款方式" clickable @click="goAddReceivePayment">
              <template #right-icon>
                <img class="leftIcon2" :src="require(`@/assets/images/arr5.png`)" />
              </template>
              <template #icon>
                <img class="leftIcon" :src="require(`@/assets/images/addrec.png`)" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
  </div>
</template>

<script>
  import api from "@/api/trade";
  import {
    mapState,
  } from "vuex";
  let that = {
    source: null
  }
  export default {
    data() {
      return {
        transCount: '',
        payeeList: [],
        receivePaymentIndex: '',
        receivePaymentId: '',
        receivePaymentName: '',
        receivePaymentCard: '',
        receivePaymentType: '',
        showReceivePaymentPicker: false,
        quickNum: [
          100,
          200,
          300,
          500,
          1000,
          2000,
          5000,
          10000
        ],
        transPrice: "1.00",
        showPricePicker: false,
        priceList: [
          "0.98",
          "0.99",
          "1.00",
          "1.01",
        ]
      }
    },
    computed: {
      ...mapState({
        loginUserinfo: state => state.global.loginUserinfo,
      }),
    },
    methods: {
      handle(){
        if(!this.transCount){
          this.$toast("请输入购买数量")
          return false;
        }
        if(!this.receivePaymentId){
          this.$toast("请选择付款方式")
          return false;
        }
        if(!this.transPrice){
          this.$toast("请选择最高单价")
          return false;
        }
        this.$router.push({
          name:'match',
          params:{
            receivePaymentId: this.receivePaymentId,
            transCount: this.transCount,
            transPrice: this.transPrice,
            userId: this.loginUserinfo.userId,
            receivePaymentName: this.receivePaymentName,
            receivePaymentCard: this.receivePaymentCard,
            receivePaymentType: this.receivePaymentType,
          },
        })
      },
      setRec(index){
        this.receivePaymentIndex = index;
        this.receivePaymentId = this.payeeList[index].id;
        this.receivePaymentName = this.payeeList[index].payeeName;
        this.receivePaymentType = this.payeeList[index].payeeType;
        this.receivePaymentCard = this.payeeList[index].payeeCard.substr(-4)
        this.showReceivePaymentPicker = false;
      },
      goAddReceivePayment(){
        this.$toast('新增付款方式')
      },
      getPayeeList(){
        let type = '';//3.银行卡 4.微信支付 5.支付宝 6.数字人民币 7.QQ支付
        api.payee({type}).then(res => {
          if(res.data.code == 0){
            this.payeeList = res.data.data;
          }
        });
      },
      onConfirmPrice(value, index) {
        // console.log(`当前值：${value}, 当前索引：${index}`);
        this.showPricePicker = false;
        this.transPrice = value;
      },
      onConfirmReceivePayment(value, index) {
        this.showReceivePaymentPicker = false;
        this.receivePayment = payeeList[index];
        console.log(this.receivePayment);
      },
    },
    mounted() {
      this.getPayeeList()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .recPop{
    padding-bottom: 66px;
    .title{
      line-height: 56px;
      text-align: center;
      color: #222222;
      font-size: 16px;
    }
    .leftIcon{
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
    .leftIcon2{
      width: 7px;
      height: 11px;
    }
    /deep/.van-cell{
      align-items: center;
    }
  }
  .leftIcon{
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
  .main{
    height: calc(100% - 30px);
    position: relative;
    padding: 15px 20px;
    background: #fff;
    .quickModel{
      border-bottom: 1px solid #CDCED1;
      padding-bottom: 15px;
      margin-bottom: 15px;
      .title{
        height: 20px;
        font-size: 14px;
        text-align: left;
        color: #444444;
        line-height: 20px;
      }
      .quicks{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5px;
        .num{
          height: 40px;
          border: 1px solid #cdced1;
          border-radius: 4px;
          font-size: 14px;
          text-align: center;
          color: #8f949c;
          line-height: 40px;
          width: calc(25% - 8px);
          margin: 5px 0;
        }
      }
    }
    .inputModel{
      border-bottom: 1px solid #CDCED1;
      padding-bottom: 15px;
      .title{
        height: 20px;
        font-size: 14px;
        text-align: left;
        color: #444444;
        line-height: 20px;
        margin-bottom: 8px;
      }
      .input{
        display: flex;
        align-items: center;
        justify-content: space-between;
        input{
          font-size: 28px;
          font-weight: Medium;
          text-align: left;
          // color: #caced4;
          line-height: 35.5px;
          width: 80%;
          border: none;
        }
        span{
          width: 17.5px;
          height: 33px;
          font-size: 26px;
          text-align: center;
          color: #8f949c;
          line-height: 33px;
        }
      }
    }
    .line{
      display: flex;
      height: 50px;
      border-bottom: 1px solid #EFF0F3;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      position: relative;
      .left{
        height: 20px;
        font-size: 14px;
        color: #444444;
        line-height: 20px;
      }
      .right{
        height: 20px;
        font-size: 14px;
        color: #8F949C;
        line-height: 20px;
        padding-right: 15px;
        &::after{
          content: " ";
          width: 7px;
          height: 11px;
          background-image: url('../../assets/images/arr5.png');
          background-size: 100% 100%;
          right: 0;
          top: 17px;
          position: absolute;
        }
      }
    }
    .redTip{
      margin: 15px 0 30px 0;
      font-size: 12px;
      text-align: left;
      color: #ff543a;
      line-height: 16.5px;
    }
    .button{
      height: 44px;
      background: #479fff;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      color: #ffffff;
      line-height: 44px;
    }
    .bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 36px;
      background: #f0f7ff;
      border-radius: 4px;
      position: relative;
      margin-top: 20px;
      span{
        height: 18.5px;
        font-size: 13px;
        text-align: left;
        color: #479fff;
        line-height: 18.5px;
        padding-left: 40px;
        &::before{
          content: " ";
          width: 16.5px;
          height: 14px;
          background-image: url('../../assets/images/book.png');
          background-size: 100% 100%;
          left: 15px;
          top: 11px;
          position: absolute;
        }
      }
      .right{
        width: 14px;
        height: 11px;
        margin-right: 15px;
      }
    }
  }
</style>
